<template>
    <div class="about">
        // select框绑定的值是selectVal，也就是treeData里的value
      <el-select
        v-model="selectVal"
        placeholder="请选择..."
        size="mini"
        clearable
        ref="select"
        style="width: 300px"
      >
        // 设置一个input框用作模糊搜索选项功能
        <el-input
          class="input"
          placeholder="此处键入'关键词'搜索查询"
          prefix-icon="el-icon-search"
          v-model="treeFilter"
          size="mini"
          clearable
        ></el-input>
        // 设置一个隐藏的下拉选项，选项显示的是汉字label，值是value
        // 如果不设置一个下拉选项，下面的树形组件将无法正常使用
        <el-option hidden key="id" :value="selectVal" :label="selectName">
        </el-option>
        // 设置树形控件
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          :check-on-click-node="true"
          ref="tree"
          node-key="id"
          :default-expand-all="true"
          :filter-node-method="filterNode"
        >
        // @node-click：树形控件选项点击事件
        // :expand-on-click-node：使树形控件只有点箭头图标的时候才会展开或者收缩节点，为false则点文字直接选中该项
        // :check-on-click-node：是否在点击节点的时候选中节点，当选项为复选框时有用，这个属性可以删除
        // :default-expand-all：默认展开所有节点
        // :filter-node-method：实现搜索功能的筛选方法
        
          <span slot-scope="{ data }">  
          //选项用插槽来显示，匹配搜索功能，并方便增加tag标签需求
            <span>{{ data.label }}</span>
            <el-tag
              size="mini"
              style="margin: 0 10px"
              v-show="filterorgType(data.tag)"
              >{{ filterorgType(data.tag) }}</el-tag
            >
          </span>
        </el-tree>
      </el-select>
    </div>
  </template>
  
  <script>
  export default {
    name: "el-select-tree",
    data() {
      return {
        selectVal: "", // select框的绑定值
        selectName: "", // select框显示的name
        treeFilter: "", // 搜索框绑定值，用作过滤
        // 树形控件数据
        treeData: [
          {
            value: "1",
            label: "一级 1菈妮",
            tag: "wife",
            children: [
              {
                value: "1-1",
                label: "二级 1-1",
                children: [
                  {
                    value: "1-1-1",
                    label: "三级 1-1-1",
                  },
                ],
              },
            ],
          },
          {
            label: "一级 2",
            value: "2",
            children: [
              {
                value: "2-1",
                label: "二级 2-1",
                children: [
                  {
                    value: "2-1-1",
                    label: "三级 2-1-1",
                  },
                ],
              },
              {
                value: "2-2",
                label: "二级 2-2",
                children: [
                  {
                    value: "2-2-1",
                    label: "三级 2-2-1鸡腿",
                    tag: "princess",
                  },
                ],
              },
            ],
          },
          {
            value: "3",
            label: "一级 3",
            children: [
              {
                value: "3-1",
                label: "二级 3-1",
                children: [
                  {
                    value: "3-1-1",
                    label: "三级 3-1-1",
                  },
                ],
              },
              {
                value: "3-2",
                label: "二级 3-2艾尔登法环",
                tag: "yyds",
                children: [
                  {
                    value: "3-2-1",
                    label: "三级 3-2-1",
                  },
                ],
              },
            ],
          },
        ],
        defaultProps: {
          children: "children",
          label: "name",
        },
        // 标签数组
        tagList: [
          { value: "wife", label: "老婆" },
          { value: "princess", label: "小公主" },
          { value: "yyds", label: "天下第一" },
        ],
      };
    },
    watch: {
      // 搜索过滤，监听input搜索框绑定的treeFilter
      treeFilter(val) {
        this.$refs.tree.filter(val);
        // 当搜索框键入值改变时，将该值作为入参执行树形控件的过滤事件filterNode
      },
    },
    methods: {
      // 结构树点击事件
      handleNodeClick(data) {
        this.selectVal = data.value; // select绑定值为点击的选项的value
        this.selectName = data.label; // input中显示值为label
        this.treeFilter = ""; // 点击后搜索框清空
        this.$refs.select.blur(); // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
      },
      // 模糊查询（搜索过滤），实质为筛选出树形控件中符合输入条件的选项，过滤掉其他选项
      filterNode(value, data) {
        if (!value) return true;
        let filterRes = data.label.indexOf(value) !== -1;
        return filterRes;
      },
      // 选项卡标签（可忽略，增值迭代需求）
      filterorgType(val) {
        let arr = this.tagList.filter((item) => {
          return item.value == val;
        });
        return arr.length ? arr[0].label : "";
      },
    },
  
    mounted() {},
  };
  </script>
  
  <style scoped>
  .input {
    width: 260px;
    margin: 10px;
  }
  </style>
  
  